<template>
  <el-dialog title="创建手动数据集"
             v-model="visible"
             :close-on-click-modal="false"
             width="33%"
             size="mini"
             draggable>
    <el-form ref="dataFormRef"
             :model="form"
             :rules="dataRules"
             formDialogRef
             label-width="50px"
             v-loading="loading">
      <el-row :gutter="24">
        <el-col>
          <el-form-item>
            <span class="text-1">手动数据集允许创建一个空的容器装入数据</span>
          </el-form-item>
        </el-col>
        <el-col :span="24"
                class="mb20">
          <el-form-item prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false"
                   size="mini">取消</el-button>
        <el-button type="primary"
                   @click="onSubmit"
                   :disabled="loading"
                   size="mini">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ModelSortDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from '/@/hooks/message';
import { getObj, addSdObj } from '/@/api/know/zhishiku';
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);
import { useRoute } from 'vue-router';

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);

// 定义字典
const { model_sort_stauts } = useDict('model_sort_stauts');

// 提交表单数据
const form = reactive({
	id: '',
	name: '',
	intro: '',
	tmbId: '',
});

// 定义校验规则
const dataRules = ref({
	name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
});

// 打开弹窗
const openDialog = (tmbId: string) => {
	visible.value = true;
	form.tmbId = tmbId;
	console.log('333:' + tmbId);
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		loading.value = true;
		await addSdObj(form);
		useMessage().success('添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped>
.text-1 {
	font-family: Segoe UI, Segoe UI;
	font-weight: 400;
	font-size: 14px;
	color: #606266;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin: 0 0 20px 0;
}
.el-form-item__content {
	margin-left: 0;
}
</style>